<template>
  <div class="silde-box">
    <slide-verify
      v-bind="$attrs"
      ref="block"
      :imgs="imgs"
      :slider-text="sliderText"
      :accuracy="accuracy"
      :l="l"
      :r="r"
      :w="width"
      :h="height"
      :style="{ width: width + 'px', height: height + 'px' }"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
    >
    </slide-verify>
  </div>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue"
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify"
import "vue3-slide-verify/dist/style.css"
import slider1 from "@/assets/slide-verify/slider1.jpg"
import slider2 from "@/assets/slide-verify/slider2.jpg"

interface Props {
  imgs?: any
  sliderText?: string
  accuracy?: number
  width?: number
  height?: number
  l?: number
  r?: number
  [propName: string]: any
}

withDefaults(defineProps<Props>(), {
  sliderText: "向右滑动解锁",
  accuracy: 1,
  imgs: [slider1, slider2],
  width: 600,
  height: 300,
  l: 42,
  r: 10,
})

const emits = defineEmits<{
  (e: "on-success"): void
  (e: "on-fail"): void
}>()

const block = ref<SlideVerifyInstance>()
const onAgain = (): void => {
  message.error("检测到非人为操作的哦~~")
  // 刷新
  block.value?.refresh()
}

//验证成功回调
const onSuccess = (): void => {
  message.success("验证成功")
  emits("on-success")
}

//验证失败回调
const onFail = (): void => {
  message.error("验证不通过，请重新验证")
  emits("on-fail")
}
</script>
<style scoped>
.silde-box {
  margin: 0 auto;
}
</style>
